<template>
  <div class="header">
    <div style="height:1.0116rem;"></div>
    <!-- 导航 -->
    <div class="header_box">
      <span @click="$router.go(-1)" v-if="$route.path!='/home'" class="goback">
        <van-icon style="margin-right:3px;" name="arrow-left" />
        返回
      </span>
      会员中心
    </div>
    <!-- 用户头像 -->
    <div class="avator">
      <van-image round width="2rem" height="2rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="info">
        <div>用户名:vip
          <van-tag round>黄金</van-tag>
        </div>
        <div>淘气值:999</div>
      </div>
    </div>
    <!-- grid宫格 -->
    <van-grid>
      <van-grid-item icon="idcard" text="待付款" to="/order" />
      <van-grid-item icon="logistics" text="待收货" to="/order" />
      <van-grid-item icon="after-sale" text="退换/售后" to="/order" />
      <van-grid-item icon="description" text="全部订单" to="/order" />
    </van-grid>
    <!--  collect-->
    <van-grid clickable :column-num="2" class="collect">
      <van-grid-item>
        5
        <span>商品收藏</span>
      </van-grid-item>
      <van-grid-item>
        0
        <span>我的足迹</span>
      </van-grid-item>
    </van-grid>
    <!-- content -->
    <van-grid :column-num="1" class="content">
      <van-grid-item>
        <span>您买的东西太少了，这里都空空的，快去挑选合适的商品吧！笔芯</span>
      </van-grid-item>
    </van-grid>

  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  background-color: #f0f3ef;
}
.header_box {
  width:100%;
  height:40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top:0;
  left:0;
  z-index:1;
}
.goback {
  position: fixed;
  top:0px;
  display: flex;
  align-items: center;
  left:15px;
}
.iconfont {
  display: block;
  font-size: 20px;
  margin: 0 auto 5px;
}
.avator {
  // position: relative;
  width: 100%;
  height: 130px;
  // background-color: #EC3F3D;
  background-image: linear-gradient(to right, #ec3e3d, #fd6f56);
  border-radius: 3px 3px 25px 25px;
  // padding: 20px 0;
  margin: 0 0 20px 0;
  // box-sizing: border-box;
  .van-image {
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
  }
  .info {
    // display: inline;
    float: right;
    margin: 20px 180px 0 0;
    width: 80px;
    font-size: 16px;
    div {
      margin-top: 10px;
    }
  }
}
.van-grid {
  margin-bottom: 20px;
}
.collect {
  font-size: .361111rem;
  font-weight: bold;
  span {
    color: #666;
    font-weight: normal;
  }
}
.van-tag {
  position: absolute;
  margin: 2px;
}
.content {
 text-align: center;
  font-size: .361111rem;
  color: #666;
  span {
padding: 40px 40px 60px 40px !important;
line-height: 2 !important;
  }

}

</style>
